<template>
  <div class="index-page">
    <div class="page-swiper">
      <mt-swipe :auto="0">
        <mt-swipe-item v-for="(item,index) in bannerListData" :key="index">
          <a class="swiper-link" :href="item.detailPath">
            <img :src="item.picPath" alt="">
          </a>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="page-tool">
      <ul class="tool-ul">
        <li class="tool-li" v-for="(item,index) in toolListData" :key="index">
          <a :href="'https://ddxyh5.fcity.xin/'+item.url">
            <div class="li-img"><img :src="item.imageUrl"></div>
            <p class="li-text">{{ item.toolName }}</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="page-list">
      <div class="list-title"><img src="../assets/img/home_title@2x.png"></div>
      <div class="list-content">
        <ul class="content-ul" v-infinite-scroll="loadMore" infinite-scroll-disabled="LoadmoreSwitch"
         infinite-scroll-distance="100">
          <li class="content-li" v-if="productListData.length" v-for="(item,index) in productListData">
            <a class="content-a" :href="item.productUrl">
              <div class="li-top">
                <div class="top-left"><img :src="item.imageUrl" /></div>
                <div class="top-right">
                  <div class="right-title">{{ item.productName }}</div>
                  <div class="right-content">{{ item.productRemark }}</div>
                </div>
              </div>
              <div class="li-bottom">
                <div class="bottom-left">
                  <div class="left-money">{{ item.startAmount }}-{{ item.startAmount }}</div>
                  <div class="left-text">额度范围(元)</div>
                </div>
                <div class="bottom-middle">
                  <div class="middle-money">{{ item.startPeriod }}-{{ item.endPeriod }}</div>
                  <div class="middle-text">贷款期限{{ item.periodUnit }}</div>
                </div>
                <div class="bottom-right">
                  <div class="right-button">立即申请</div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list-more" >
        <div class="more" v-if="more">没有更多数据了</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      bannerListData: [],
      toolListData:[],
      LoadmoreSwitch: true,
      productListData: [],
      pageInfo:{
        page: 1,
        size: 10
      },
      more: false
    }
  },
  methods:{
    loadMore(){
      //获取更多
      let that = this; 
      that.LoadmoreSwitch = true    
      that.pageInfo.page++
      that.productList();
    },
    async bannerList(){
      let that = this;
      let List = await that.ajax({
        url:"/Api-App/loanMarket/H5/banner/list",
        data:{
          os: 1,
          type: 1
        }
      })
      that.bannerListData = List.data
    },
    async toolList(){
      let that = this;
      let List = await that.ajax({
        url:"/Api-App/loanMarket/H5/function/list",
        
      })
      that.toolListData = List.data
    },
    setData(data){
      let that = this;
      that.productListData = that.productListData.concat(data.list);
      that.$nextTick(function () {
        that.LoadmoreSwitch = that.productListData.length >= data.total;
        if(that.LoadmoreSwitch){
          that.more = true
        }
      })

    },
    productList(type){
      let that = this;
      that.$ajax({
        url:"/Api-App/loanMarket/H5/product/list",
        data:{
          page: that.pageInfo.page,
          size: that.pageInfo.size
        },
        success: function(res){
          that.setData(res.data)
        }
      })
    },
    
  },
  mounted(){
    let that = this;
    that.bannerList();
    that.toolList();
    that.productList(true);
  }
}
</script>
<style lang="less">
  .index-page{
    .page-swiper{
      width:100%;
      height:180px;
      .swiper-link{
        img{
          display:block;
          height:100%;
        } 
      }
      
    }
    .page-tool{
      padding:0 15px;
      background:#fff;
      .tool-ul{
        width:100%;
        overflow:hidden;
        .tool-li{
          background:#fff;
          width:33%;
          float:left;
          padding: 28px 0 20px;
          a{
            text-decoration:none;
            .li-img{
              width: 50px;
              height: 50px;
              margin:0 auto;
              img{
                display:block;
                width:50px;
              }
            }
            .li-text{
              width:100%;
              margin-top:12px;
              line-height: 20px;
              font-size: 14px;
              color: #333333;
              text-align:center;
            }  
          }
        }
      }
    }
    .page-list{
      margin-top:10px;
      .list-title{
        padding:16.5px 15px 0;
        background:#fff;
        height:50px;
        box-sizing: border-box;
        border-bottom: #DDDDDD;
        img{
          display:block;
          width:71px;
        }
      }
      .list-content{
        width:100%;
        .content-ul{
          background:#fff;
          .content-li{
            padding:20px 15px;
            border-top:1px solid #dddddd;
            .content-a{
              display:block;
              .li-top{
                overflow:hidden;
                display:flex;
                .top-left{
                  width: 35px;
                  height: 35px;
                  flex:none;
                  img{
                    display:block;
                    width:100%;
                    height:100%;
                  }
                }
                .top-right{
                  flex:1;
                  margin-left: 10px;
                  .right-title{
                    font-size: 14px;
                    color: #333333;
                    font-weight: 600;
                    line-height:20px;
                  }
                  .right-content{
                    font-size: 12px;
                    color: #999999;
                    line-height:17px;
                  }
                }
              }
              .li-bottom{
                overflow:hidden;
                margin-top: 16px;
                .bottom-left{
                  float:left;
                  width:33.33%;
                  .left-money{
                    font-size: 18px;
                    color: #F04E4B;
                    font-weight: 600;
                    line-height: 24px;
                  }
                  .left-text{
                    font-size: 12px;
                    color: #999999;
                    margin-top: 2px;
                    line-height:17px;
                  }
                }
                .bottom-middle{
                  float:left;
                  width:33.33%;
                  .middle-money{
                    font-size: 14px;
                    color: #000000;
                    font-weight: 600;
                    line-height: 24px;
                  }
                  .middle-text{
                    font-size: 12px;
                    color: #999999;
                    margin-top: 2px;
                    line-height:17px;
                  }
                }
                .bottom-right{
                  float:left;
                  width:33.33%;
                  padding-top:7px;
                  .right-button{
                    width: 79px;
                    height: 30px;
                    line-height:30px;
                    background-image: linear-gradient(90deg, #FF7D4A 0%, #FF4029 100%);
                    box-shadow: 0 6px 8px 0 #FFDED6;
                    border-radius: 100px; 
                    font-size: 12px;
                    color: #FFFFFF;
                    text-align:center;
                    margin:0 auto ;
                  }
                }
              }
            }
          }
        }
      }
      .list-more{
        width:100%;
        height: 50px;
        border-top:1px solid #DDDDDD;
        background:#fff;
        .more{
          height: 50px;
          line-height: 50px;
          text-align:center;
          font-size: 14px;
        }
      }
    }
  }
</style>
